<template>
    <div>
        <!-- search start -->
            <search-bar
                @handleSearch="init"
            />
        <!-- search end -->

        <!-- table start -->
            <table-data-el
                :tableData="tableData.list"
                :tableLabel="tableLabel"
                :page.sync="page"
                :pageSize.sync="pageSize"
                @handleCheckRegion="handleCheckRegion"
            />
        <!-- table end -->

        <!-- dialog start -->
            <el-dialog
                :visible.sync="isShowInc"
                title="地区详情"
                width="30%"
                center
                v-el-drag-dialog
            >
                <table-data-el
                    :tableData="incData"
                    :tableLabel="incLabel"
                    height="20vh"
                    :isShowPagination="false"
                    :border="true"
                />
            </el-dialog>
        <!-- dialog end  -->
    </div>
</template>

<script>
import tableDataEl from '@/views/Setup/common/table'
export default {
    name: "addRegion",
    components: {
        tableDataEl
    },
    data () {
        return {
            tableData: [],
            tableLabel: [
                {
                    label: '运营商名称',
                    prop: 'company'
                },
                {
                    label: '负责人',
                    prop: 'leader'
                },
                {
                    label: '电话',
                    prop: 'phone'
                },
                {
                    label: '地区',
                    methodName: 'handleCheckRegion',
                    detail: true,
                    btnText: '详情'
                },
                {
                    label: '支付凭证',
                    prop: 'voucher',
                    image: true
                },
                {
                    label: '详情',
                    prop: ''
                }
            ],
            page: 1,
            pageSize: 8,
            isShowInc: false,
            incData: [],
            incLabel: [
                {
                    label: '省',
                    prop: 'province'
                },
                {
                    label: '市',
                    prop: 'city'
                },
                {
                    label: '县',
                    prop: 'county'
                }
            ]
        }
    },
    methods: {
        async init (search = '') {
            let paramsStr = Object.assign(search,{page: this.page,pageSize: this.pageSize})
            let res = await this.api.addRegionList(paramsStr)
            this.tableData = res.data;
        },
        async handleCheckRegion (...value) {
            let res = await this.api.RegionNumDetail({'inc_id':value[1]['inc_id']});
            this.incData = res.data.list;
            this.isShowInc = true
        }

    },
    mounted () {
        this.init()
    },
    beforeMount() {
        // this.init()
    },
    watch: {
        page () {
            this.init()
        } ,
        pageSize () {
            this.init()
        }
    }

}
</script>

<style scoped>

</style>
